<!doctype>
<html>

	<head>
		<meta charset="UTF-8">
		<title>game</title>
		<style>
			.containor {
				border: 1px solid #999;
				position: absolute;
				background-color: #ffffff;
				width: 595px;
				height: 595px;
			}
			
			.kuai {
				float: left;
				background: url(http://pic.dbw.cn/0/08/95/46/8954644_618986.jpg) no-repeat;
				cursor: pointer;
				position: relative;
			}
		</style>
		<script>
			function Img() {
				this.div = null;
				this.init = function(tmpI, w, h, l, t) {
					var posLeft = -w * l;
					var posTop = -h * t;
					return '<div class="kuai" id="img' + tmpI + '" style="width:' + w + 'px;height:' + h + 'px;background-position:' + posLeft + 'px ' + posTop + 'px"></div>'
				}				
			}

			var game = {			
				row: undefined,
				col: undefined,			
				arr: [],//数组存放 图片碎片
				//定义初始化函数
				init: function(row, col) {
					this.row = row;
					this.col = col;
					
					//因为 div的 id=main 所以 main 可以直接引用 不需要 document.getElementById("main");
					//不排除有的浏览器不能使用，或者已经定义了main的变量导致冲突了，
					//所以稳妥起见 会用var main = document.getElementById("main");重新定义main
					var main = document.getElementById("main");
					var height =parseInt(main.clientHeight / row); ///可见高度
					var width = parseInt(main.clientWidth / col);  ///可见宽度
					var tmpI = 0;
					var str = "";
					//摆放图片
					for(var i = 0; i < row; i++) {
						for(var j = 0; j < col; j++) {
							var timg = new Img();
							str += timg.init(tmpI, width, height, j, i);//把div 的 html源代码组合起来
							this.arr.push(timg); //同步添加到arr里面
							tmpI++;
						}
					}
					//div 嵌套div的时候会 从左到右 从上到下 自动排列
					main.innerHTML = str;
					
					//最后一张图片不显示 只能用 visibility 不能用 display 属性哦
					document.getElementById("img8").style.visibility = 'hidden';
					//为每张图片添加onclick 事件
					var list = main.getElementsByTagName("div");
					for(var i = 0; i < list.length; i++) {
						var arri = list[i];
						arri.zdyindex=i;//为div 添加一个自定义属性 zdyindex 
						arri.onclick = function() {		//注意：这样的写法可以防止事件函数立即执行		；	
							game.fclick( this);//这里的this 指向 onclick方法的所有者对象
						};
					}
					//随机打乱顺序
					this.random(list); 
				},
				random: function(list) {
					var len = this.arr.length;  //这里的this 指向game 对象
					var m = Math;
					//打乱顺序，思路是随便取一张插入到第一张前面
					for(var i = 0; i < 20; i++) {
						var rNum1 = parseInt(m.random() * 8);
						//把第rNum1的图片插入到第0张图片的前面
						list[0].parentNode.insertBefore(list[rNum1], list[0]);
					}
				},
				fclick: function(e) {
					var list = main.getElementsByTagName("div");
					var obj = []; //用[0~3]数组分别存放 左边,右边,上边,下边的图片对象,[4]存放下一个图片对象
					var nobj = null;//存放空白块
					//找出选中块的四边连接的块
					for(var i = 0; i < list.length; i++) {
						//0 1 2
						//3 4 5
						//6 7 8     
						if(list[i] == e) {
							console.log(i);						
							obj[0] = (i % this.col > 0) ? list[i - 1] : false; //left
							obj[1] = (i % this.col < this.col - 1) ? list[i + 1] : false; //right
							obj[2] = (parseInt(i / this.col) > 0) ? list[i - this.col] : false; //up
							obj[3] = (parseInt(i / this.col) < this.row - 1) ? list[i + this.col] : false; //down
							obj[4] = i<list.length-1? list[i + 1]:null;
							break;
						}
					}
					//找出空白块，如果相邻的图片有空白图，即锁定，否则为空
					for(var i = 0; i < 4; i++) {						
						if(obj[i] && obj[i].style.visibility == "hidden") {
							nobj = obj[i];		
							break;
						}
					}
					
					if(!nobj){ //如果没有找到空白图 退出
						return;
					}
					//如果找到 就交换图片
						//					console.log(e);
						//					console.log(nobj);
						//					console.log(obj[4]);
					//交换算法：如果空白块正好在右侧只要交换顺序，否则需要移动一下
					if (obj[4]==nobj)
						nobj.parentNode.insertBefore(nobj,e);	
					else{
				     	nobj.parentNode.insertBefore(e,nobj);		
					    nobj.parentNode.insertBefore(nobj, obj[4]);
					}
					
				},
				//是否成功的算法 是所有图片的顺序，从小到大 正常排序
				isSuccess: function(list) {
					var len = list.length;
					for(var i = 0; i < len; i++) {
						var o = list[i];
						if(i != o.zdyindex) {
							return false;
						}
					}
					return true;
				}
			}

			onload = function() {
				game.init(3, 3); //几行几列
			};
		</script>

	</head>

	<body>
		<div id="main" class="containor">

		</div>
	</body>

</html>